 @import '../../../../styles.less';
 @menuHeader: 120*@rem;
 .menu{
   box-sizing: border-box;
}

.menu-header{
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    z-index: 9;
    height: @menuHeader;
    background: @bgColor;
    .shadowDef();
}

.menu-top-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10*@rem @interval;
    .title{
        display: inline;
    }
    .num{
        font-size: @FStitleSm;
        color: @secentColor;
    }
    .icon{
        font-size: @FStitleMd;
    }
    .title,
    .icon{
        font-size: @FStitleMd;
        font-weight: 600;
    }
}

 .menu-content{
    overflow-y: scroll;
    margin-top: @menuHeader;
    box-sizing: border-box;
 }

.product-list {
    margin-bottom: 20*@rem;
}

.product-list-header {
    padding: 10*@rem @interval;
    .icon{
        @size: 40*@rem;
        width: @size;
        height: @size;
    }
}

 .product{
    display: flex;
    justify-content: space-between;
    padding: @interval;
    border-radius: @radiusDef;
    background: @bgColor;
    
   
    
    .product-info{
        flex: 1 1;
        box-sizing: border-box;
        padding-right: 20*@rem;
    }

    .product-name{
        margin-bottom: 10*@rem;
        font-size: @FStitle;
        font-weight: 600;
    }
    .product-summer{
        overflow: hidden;
        margin-bottom: 10*@rem;
        height: (@lineHeight + 1)*@FSdef; // 控制显示两行
        text-overflow: ellipsis;
        color: @secentColor;
    }
    
    .product-price{
        display: flex;
        // align-items: flex-start;
        color: @secentColor;
        .em{
            font-weight: 600;
            font-size: @FStitle;
            color: @mainColor;
            line-height: 1.2;
        }
    }
    
    .product-img{
        @size: 120*@rem;
        flex: 0 0 @size;
        width: @size;
        height: @size;
    }
 }

.menu-footer{
    padding: 10*@rem 0 400*@rem;
    text-align: center;
    color: @secentColor;    
}

.drop-menu{
    
    .drop-menu-item{
        @size: 40*@rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: @interval;
        border-bottom: 1*@rem solid transparent;
        background: @bgColor;

        &.active{
            border-color: @mainColor;
            .title{
                color: @mainColor;
            }
        }

        .label{
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .icon{
            display: inline-block;
            width: @size;
            height: @size;
        }
        .title{
            margin-left: 10*@rem;
            display: inline-block;
            font-size: @FStitleSm;
        }
        .num{
            color: @secentColor;
        }
    }

    
    
}